<template>
  <div>
    <!-- 搜索框 -->
    <view class="search-wrapper">
      <view class="search-input">
        <icon type="search" size="20"></icon>
        {{keyword}}
      </view>
    </view>
    <!-- tab栏 -->
    <view class="tab">
      <block v-for="(item,index) in tabs" :key="index">
        <view
          class="tab-item"
          :class="{ active : index == tabIndex }"
          @tap="changTab(index)"
        >{{item}}</view>
      </block>
    </view>
    <!-- 列表布局 -->
    <view class="goods-list">
      <block v-for="(item ,index) in lists" :key="index">
        <view class="goods-item" @tap="goToDetail(item.goods_id)">
          <image :src="item.goods_small_logo"></image>
          <view class="goods-right">
            <view class="goods-title">{{item.goods_name}}</view>
            <view class="price">￥{{item.goods_price}}</view>
          </view>
        </view>
      </block>
    </view>
    <view class="loading" v-show="hasMore==false">
      底线
    </view>
  </div>
</template>

<script>
import request from "@/utils/request"
export default {
  data () {
    return {
      // 页面参数
      keyword: "",
      // tab栏数组
      tabs: ["综合", "销量", "价格"],
      // 判断类名是否生效的数据
      tabIndex: 0,
      // 商品数据数组
      lists:[],
      // 页码
      pagenum :1,
      // 数据条数
      pagesize:20,
      // 判断是否还要加载
      hasMore:true
    }
  },
  // 只有onLoad生命周期函数能获取页面参数
  onLoad (query) {
    wx.showToast({
      title: '加载中',
      icon: 'loading',
      duration: 2000
    })
    this.keyword = query.keyword
    
  },
  // onShow生命函数
  onShow(){
    this.itinData()
  },
  // 下拉刷新
  onPullDownRefresh(){

  },
  // 上拉触底会触发的函数
  onReachBottom(){
    this.getData()
  },
  methods: {
    // 初始化页面数据
    itinData(){
      this.lists = [];
      this.pagenum = 1;
      this.pagesize = 20;
      this.hasMore = true;
      this.getData()
    },
    // 切换tab栏
    changTab (index) {
      this.tabIndex = index
    },
    // 跳转到详情页
    goToDetail(id){
      wx.navigateTo({
        url:"/pages/goods_detail/main?goods_id="+id
      })
    },
    // 请求商品数据
    getData(){
      if(!this.hasMore){
        return;
      }
      wx.showLoading({
        title: '加载中',
      })
      request("https://www.zhengzhicheng.cn/api/public/v1/goods/search","GET",{
        query:this.keyword,
        pagenum:this.pagenum,
        pagesize:this.pagesize
      })
    .then(res=>{
      let {goods}=res.data.message;
      this.lists=[...this.lists,...goods];
      console.log(this.pagenum)
      this.pagenum += 1;
      wx.hideLoading()
      wx.stopPullDownRefresh()
      if(goods.length < this.pagesize){
        this.hasMore = false;
      }
    })
    }
  }
}
</script>

<style lang="scss">
.search-wrapper {
  background: #eee;
  padding: 20rpx;
  .search-input {
    background: #fff;
    height: 60rpx;
    font-size: 15px;
    color: #999;
    display: flex;
    align-items: center;
    padding: 0 20rpx;
  }
  .search-input icon {
    margin-right: 5px;
  }
}
.tab {
  display: flex;
  border-bottom: 1px #eee solid;
  .tab-item {
    flex: 1;
    text-align: center;
    line-height: 100rpx;
  }
  .active {
    color: red;
  }
}
.goods-list {
  padding-left: 20rpx;
  .goods-item {
    padding: 20rpx 20rpx 20rpx 0;
    display: flex;
    border-bottom: 1px #eee solid;
    image {
      display: block;
      width: 200rpx;
      height: 200rpx;
      flex-shrink: 0;
      margin-right: 20rpx;
    }
    .goods-title {
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      overflow: hidden;
    }
    .goods-right {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }
    .price {
      color: red;
      font-size: 14px;
      span {
        font-size: 22px;
      }
    }
  }
}
.loading {
  line-height: 80rpx;
  text-align: center;
  font-size: 14px;
  color: #999;
}
</style>